//广告开启关闭部分JS
$(function() {

        function handlerBtnClick() {
            $("#advertisement").css({
                display: "none"
            })
            $("#advertisement_btn").css({
                display: "none"
            })
            $("#advertisement_btnOpen").css({
                display: "block",
                transform: "rotateZ(-45deg)",


            })
        }

        function handlerBtnClickOpen() {
            $("#advertisement").css({
                display: "block"
            })
            $("#advertisement_btnOpen").css({
                display: "none"
            })
            $("#advertisement_btn").css({
                display: "block"
            })
        }

        $("#advertisement_btn>span").on("click", handlerBtnClick)
        $("#advertisement_btnOpen>span").on("click", handlerBtnClickOpen)

        $("li").on("click", function() {
            let clone = $(".Secondary_menu2").clone();
            $("li").append(clone);
        })




        // let index = 0;

        // function handlerNextClick() {
        //     // 3 : slide元素的最大下标;  因为我们多复制了一个图片; 
        //     if (index === 7) {
        //         // 因为最后一张图片已经显示了第0张图片的内容，所以我们的下标应该直接变成 1;
        //         index = 0;
        //     } else {
        //         index++;
        //     }
        //     // 淡入淡出的动画效果我们通过修改元素的active类名来实现; 
        //     changeItem();
        // }
        // $(".button-next").on("click", handlerNextClick);

        // function handerPrevClick() {
        //     if (index === 0) {
        //         index = 7;
        //     } else {
        //         index--;
        //     }
        //     changeItem();
        // }

        // function changeItem() {
        //     for (var i = 0; i < $(".slides").length; i++) {
        //         //清空样式
        //         $(".slides")[i].removeClass(".active")
        //         $(".pagination>span")[i].removeClass(".active")
        //     }
        //     $(".slides")[index].addClass(".active")
        //     $(".pagination>span")[index].addClass(".active")

        // }
        // $(".button-prev").on("click", handerPrevClick)

        // function handlerIndexOver() {
        //     index = this.index;
        //     changeItem()
        // }
        // for (var i = 0; i < $(".pagination>span").length; i++) {
        //     $(".pagination>span")[i].index = i;
        //     $(".pagination>span")[i].on("mouseover", handlerIndexOver)
        // }
        var button_next = document.querySelector(".button-next");
        var button_prev = document.querySelector(".button-prev");
        var slides = document.querySelectorAll(".slide");
        var spans = document.querySelectorAll(".pagination span");
        var slide_bg = document.querySelectorAll(".slide_bg");

        var index = 0;

        function handlerNextClick() {
            if (index === 7) {
                index = 0;
            } else {
                index++;
            }
            changeItem();


        }
        button_next.addEventListener("click", handlerNextClick);

        function handlerPrevClick() {
            if (index === 0) {
                index = 7;
            } else {
                index--;
            }
            changeItem();

        }

        function changeItem() {
            for (var i = 0; i < slides.length; i++) {
                slides[i].classList.remove("active");
                spans[i].classList.remove("active");
                slide_bg[i].classList.remove("active");
            }
            slides[index].classList.add("active");
            spans[index].classList.add("active");
            slide_bg[index].classList.add("active");


        }
        button_prev.addEventListener("click", handlerPrevClick);


        function handlerIndexOver() {

            index = this.index;
            // 调用切换动画效果; 
            changeItem();
        }


        for (var i = 0; i < spans.length; i++) {

            spans[i].index = i;

            spans[i].addEventListener("mouseover", handlerIndexOver)
        }
        setInterval(handlerNextClick, 3000)
    })
    //添加二级菜单